<template>
	<view class="v-line-progress" :style="[$u.addStyle(customStyle)]">
		<view
			class="v-line-progress__background"
			ref="v-line-progress__background"
			:style="[
				{
					backgroundColor: inactiveColor,
					height: $u.addUnit(height),
				},
			]"
		>
		</view>
		<view class="v-line-progress__line" :style="[progressStyle]">
			<slot>
				<text
					v-if="showText && percentage >= 10"
					class="v-line-progress__text"
					>{{ innserPercentage + "%" }}</text
				>
			</slot>
		</view>
	</view>
</template>

<script>
import props from "./props.js";
import mpMixin from "../../libs/mixin/mpMixin.js";
import mixin from "../../libs/mixin/mixin.js";
// #ifdef APP-NVUE
const dom = uni.requireNativePlugin("dom");
// #endif
/**
 * lineProgress 线型进度条
 * @description 展示操作或任务的当前进度，比如上传文件，是一个线形的进度条。
 * @property {String}			activeColor		激活部分的颜色 ( 默认 '#19be6b' )
 * @property {String}			inactiveColor	背景色 ( 默认 '#ececec' )
 * @property {String | Number}	percentage		进度百分比，数值 ( 默认 0 )
 * @property {Boolean}			showText		是否在进度条内部显示百分比的值 ( 默认 true )
 * @property {String | Number}	height			进度条的高度，单位px ( 默认 12 )
 *
 * @example <v-line-progress :percent="70" :show-percent="true"></v-line-progress>
 */
export default {
	name: "v-line-progress",
	mixins: [mpMixin, mixin, props],
	data() {
		return {
			lineWidth: 0,
		};
	},
	watch: {
		percentage(n) {
			this.resizeProgressWidth();
		},
	},
	computed: {
		progressStyle() {
			let style = {};
			style.width = this.lineWidth;
			style.backgroundColor = this.activeColor;
			style.height = uni.$u.addUnit(this.height);
			return style;
		},
		innserPercentage() {
			// 控制范围在0-100之间
			return uni.$u.range(0, 100, this.percentage);
		},
	},
	mounted() {
		this.init();
	},
	methods: {
		init() {
			uni.$u.sleep(20).then(() => {
				this.resizeProgressWidth();
			});
		},
		getProgressWidth() {
			// #ifndef APP-NVUE
			return this.$uGetRect(".v-line-progress__background");
			// #endif

			// #ifdef APP-NVUE
			// 返回一个promise
			return new Promise((resolve) => {
				dom.getComponentRect(
					this.$refs["v-line-progress__background"],
					(res) => {
						resolve(res.size);
					}
				);
			});
			// #endif
		},
		resizeProgressWidth() {
			this.getProgressWidth().then((size) => {
				const { width } = size;
				// 通过设置的percentage值，计算其所占总长度的百分比
				this.lineWidth = (width * this.innserPercentage) / 100 + "px";
			});
		},
	},
};
</script>

<style lang="scss" scoped>
@import "../../libs/css/components.scss";

.v-line-progress {
	align-items: stretch;
	position: relative;
	@include flex(row);
	flex: 1;
	overflow: hidden;
	border-radius: 100px;

	&__background {
		background-color: #ececec;
		border-radius: 100px;
		flex: 1;
	}

	&__line {
		position: absolute;
		top: 0;
		left: 0;
		bottom: 0;
		align-items: center;
		@include flex(row);
		color: #ffffff;
		border-radius: 100px;
		transition: width 0.5s ease;
		justify-content: flex-end;
	}

	&__text {
		font-size: 10px;
		align-items: center;
		text-align: right;
		color: #ffffff;
		margin-right: 5px;
		transform: scale(0.9);
	}
}
</style>
